<template>
  <view class="cabinet-list-container">
    <view class="search-section">
      <view class="search-bar">
        <input 
          class="search-input" 
          placeholder="请输入设备编号或名称" 
          v-model="searchKeyword"
        />
        <uni-icons type="scan" color="#666" size="24" @click="toScan"></uni-icons>
      </view>
    </view>
    
    <view class="filter-tabs">
      <view 
        class="filter-tab" 
        :class="{active: activeFilter === 'all'}"
        @click="activeFilter = 'all'"
      >
        所有
      </view>
      <view 
        class="filter-tab" 
        :class="{active: activeFilter === 1}"
        @click="activeFilter = 1"
      >
        在线
      </view>
      <view 
        class="filter-tab" 
        :class="{active: activeFilter === 0}"
        @click="activeFilter = 0"
      >
        离线
      </view>
      <view 
        class="filter-tab" 
        :class="{active: activeFilter === 'abnormal'}"
        @click="activeFilter = 'abnormal'"
      >
        异常
      </view>
    </view>
    
    <view class="cabinet-count">
      <text class="count-text">共{{filteredCabinets.length}}组换电柜</text>
    </view>
    
    <scroll-view class="cabinet-list" :show-scrollbar="false" scroll-y>
      <view 
        class="cabinet-item" 
        v-for="cabinet in filteredCabinets" 
        :key="cabinet.cabinetSn"
        @click="goToDetail(cabinet)"
      >
        <view class="cabinet-header">
          <view class="cabinet-info">
            <text class="cabinet-status online" v-if="cabinet.onlineStatus === 1">在线</text>
            <text class="cabinet-status offline" v-else>离线</text>
			
			<text class="cabinet-name">{{cabinet.cabinetName}}</text>
			
          </view>
          <text class="service-status" :class="{disabled:!cabinet.cabinetEnable}">{{cabinet.cabinetEnable ? '服务中' : '已停用'}}</text>
        </view>
        
        <view class="cabinet-details">
          <view class="detail-row">
            <text class="detail-label">电柜编号：</text>
            <text class="detail-value">{{cabinet.cabinetSn|| '未知'}}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">仓门数量：</text>
            <text class="detail-value">{{cabinet.boxNum || '未知'}}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">信号强度：</text>
            <text class="detail-value">{{cabinet.dbm || '正常'}}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">电池数量：</text>
            <text class="detail-value">{{cabinet.batteryNum || 0}}</text>
          </view>
		  <view class="detail-row">
		    <text class="detail-label">温度：</text>
		    <text class="detail-value">{{cabinet.temperature || 0}}</text>
		  </view>
          <view class="detail-row" v-if="cabinet.address" @click.stop="openAddress(cabinet)">
            <text class="detail-label">电柜地址：</text>
            <text class="detail-value">{{cabinet.address || '未知位置'}}</text>
			<uni-icons type="paperplane" color="#666" size="18"></uni-icons>
          </view>
        </view>
        
        <view class="stats-row">
          
          <view class="stat-item">
            <text class="stat-value">{{cabinet.batteryFulla|| 0}}</text>
            <text class="stat-label">48v可用</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{cabinet.batteryFullb|| 0}}</text>
            <text class="stat-label">60v可用</text>
          </view>
		  <view class="stat-item">
		    <text class="stat-value">{{cabinet.batteryFullc || 0}}</text>
		    <text class="stat-label">72v可用</text>
		  </view>
          <view class="stat-item">
            <text class="stat-value">{{cabinet.batteryFulla + cabinet.batteryFullb +cabinet.batteryFullc|| '未知'}}</text>
            <text class="stat-label">总计</text>
          </view>
        </view>
      </view>
    </scroll-view>
    
   <view class="add-cabinet-btn">
      <button class="add-btn" @click="addCabinet">添加电柜</button>
    </view>
  </view>
</template>

<script>
import api from '@/config/api.js'
export default {
  data() {
    return {
      searchKeyword: '',
      activeFilter: 'all',
      cabinets: []
    }
  },
  computed: {
    filteredCabinets() {
      let filtered = this.cabinets
      
      // 根据筛选条件过滤
      if (this.activeFilter !== 'all') {
        filtered = filtered.filter(cabinet => cabinet.onlineStatus === this.activeFilter)
      }
      
      // 根据搜索关键词过滤
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase()
        filtered = filtered.filter(cabinet => 
          cabinet.cabinetName.toLowerCase().includes(keyword) || 
          cabinet.cabinetSn.toLowerCase().includes(keyword)
        )
      }
      
      return filtered
    }
  },
  onLoad() {
  	this.loadCabinetList()
  },
  methods: {
   async loadCabinetList(cabinetSn='') {
		try {
			let params={
				"pageNo": 1,
				"pageSize": 15,
				"onlineStatus": "",
				"cabinetFault": "",
				"keywords": ""
			}
			cabinetSn && (params.keywords=cabinetSn)
		  const result = await api.cabinet.getCabinetList({
			...params
		  })
		  console.log('getCabinetList',result)
		  this.cabinets = result
		} catch (error) {
		  console.error('获取电柜列表失败:', error)
		}
	  },
	  
	  openAddress(cabinet){
		  if(cabinet.lat && cabinet.lng){
			  let params={
				  latitude: parseFloat(cabinet.lng),
				  longitude: parseFloat(cabinet.lat),
				  name:cabinet.cabinetName|| '未知电柜',
				  address:cabinet.address || '未知位置',
			  }
			  console.log('params',params)
			 uni.openLocation({
				...params,
				success: function () {
					console.log('success');
				},
				fail: function (err) {
					console.log('openLocation-fail',err);
				},
			}); 
		  }else{
			  uni.showToast({
			    title: '获取位置失败',
			    icon: 'none'
			  })
		  }
		  
	  },
    goToDetail(cabinet) {
	  uni.setStorageSync('currentCabinet',cabinet)
      uni.navigateTo({
        url: `/pages/cabinet/detail?cabinetSn=${cabinet.cabinetSn}&cabinetName=${cabinet.cabinetName}`
      })
    },
	toScan(){
		uni.scanCode({
		  success: (res) => {
			// 提取code参数
			const snMatch = res.result.match(/sn=([^&]+)/);
			const cabinetSn = snMatch ? snMatch[1] : null;
			console.log('cabinetSn',cabinetSn)
			this.loadCabinetList(cabinetSn)
		  }
		});
	},
    addCabinet() {
      uni.navigateTo({
      	url:'/pages/cabinet/add'
      })
    }
  }
}
</script>

<style scoped>
.cabinet-list-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.search-section {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.search-bar {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1;
  height: 70rpx;
  background-color: #f5f5f5;
  border-radius: 35rpx;
  padding: 0 70rpx 0 30rpx;
  font-size: 28rpx;
  color: #333;
}

.search-icon {
  position: absolute;
  right: 30rpx;
  font-size: 32rpx;
  color: #999;
}

.filter-tabs {
  display: flex;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.filter-tab {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 28rpx;
  color: #666;
}

.filter-tab.active {
  color: #007AFF;
  font-weight: bold;
  position: relative;
}

.filter-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #007AFF;
  border-radius: 2rpx;
}

.cabinet-count {
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.count-text {
  font-size: 26rpx;
  color: #999;
}

.cabinet-list {
  height: calc(100vh - 400rpx);
  padding: 20rpx 30rpx;
  box-sizing: border-box;
}

.cabinet-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.cabinet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.cabinet-info {
  display: flex;
  align-items: center;
}

.cabinet-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-left: 20rpx;
}

.cabinet-status {
  font-size: 24rpx;
  padding: 6rpx 12rpx;
  border-radius: 8rpx;
}

.cabinet-status.online {
  background-color: #00ea89;
  color: #fff;
}

.cabinet-status.offline {
  background-color: #ff6063;
  color: #fff;
}

.service-status {
  font-size: 24rpx;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #00b500;
  color: #fff;
}
.service-status.disabled {
  font-size: 24rpx;
  background-color: #ec0000;
  color: #fff;
}
.cabinet-details {
  margin-bottom: 20rpx;
}

.detail-row {
  display: flex;
  margin-bottom: 10rpx;
  font-size: 26rpx;
  align-items: center;
}

.detail-label {
  color: #999;
  width: 200rpx;
}

.detail-value {
  color: #333;
  flex: 1;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
}

.add-cabinet-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #eee;
}

.add-btn {
  background-color: #007AFF;
  color: #fff;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
  line-height: 80rpx;
}
</style>